<template>
  <div class="demo">
    <h1>{{msg}}</h1>
    <h2>学生名字:{{ name }}</h2>
    <h2>学生性别:{{ gender }}</h2>
    <h2>学生年龄:{{ myAge + 1 }}</h2>
    <button @click="updateAge">点我年龄+1</button>
  </div>
</template>

<script>
export default {
  name: 'veu-student',
  data() {
    return {
      msg:'欢迎来到德莱联盟',
      myAge:this.age
    }
  },
  methods:{
    updateAge() {
      this.myAge++;
    }
  },
  //通过props传入的类型 不允许修改 想要修改 在data中配置一个接收属性来修改
  //指定传入的属性 顺序不讲究 简单接受
  // props:['name','age','gender'

  //限制类型 会检查类型 不对的话会报错
  // props:{
  //   name:{
  //     type:String
  //   },
  //   age:{
  //     type:Number
  //   },
  //   gender:{
  //     type:String
  //   }
  // }
  props:{
    name:{
      type:String,
      required:true //必须的类型
    },
    age:{
      type:Number,
      default:99 //默认值
    },
    gender:{
      type:String,
      required: true
    }
  }
}
</script>


<style scoped>
.demo {
  background-color: skyblue;
}
</style>